import Vue from "vue"

import VueRouter from "vue-router"
import Discover from "../pages/Discover"
import Friend from "../pages/Friend"
import Djradio from "../pages/Discover/Djradio"
import Other from "../pages/Discover/Other"
Vue.use(VueRouter) //use的作用就是将路由注入到每一个子组件

//把配置路由可以分为3个步骤

//1.定义视图组件

//2.配置routes

//3.编写router-view视图组件

//没有在routes配置的路径都属于不合法路由,对于这些不合法路由 我们需要给他配置404页面

const routes = [ //路由配置,只需要更改这个位置就可以了
    {
        path: "/",
        redirect: "/discover"
    },
    {
        path: "*",
        component: () => import(/*webpackChunkName:'404' */"../pages/Page404")
    },
    //一个对象代表一个路由配置
    //一般情况下我们需要传递两个字段,path 指的是路由的路径 components 路径映射的视图组件
    //匹配优先级:相同的路径可以匹配多个组件,存在优先级的关系,谁先编写,就优先匹配谁
    {
        path: "/discover",
        redirect: "/discover/toplist",//路由重定向
        component: Discover,
        children: [//子路由配置,里面的path 1级路径不能加"/"
            {
                name: 'playlist',//具名路由
                path: "playlist",
                component: () => import(/*webpackChunkName:'palylist' */"../pages/Discover/Playlist"),
            },
            {
                path: "toplist",
                component: () => import(/*webpackChunkName:'toplist' */"../pages/Discover/Toplist")
            },
            {
                path: "djradio",
                // component:() => import(/*webpackChunkName:'djradio' */"../pages/Discover/Djradio")
                components: { //多视图的写法 不能使用路由懒加载
                    default: Djradio,
                    o: Other
                }
            },
        ]
    },
    // {
    //     path: "/discover",
    //     component: Friend
    // },
    {
        path: "/friend",
        component: Friend
    },
    //路由懒加载,利用了webpack提供的代码切割功能
    //好处:就是首屏加载速度非常快,它单独分离出来了,不需要等待总资源包加载完成,用户体验好
    {
        path: "/mine",
        component: () => import(/*webpackChunkName:'mine'*/"../pages/Mine")
    },
    {
        path: "/list",
        name: "list",
        component: () => import(/*webpackChunkName:'list' */"../pages/List")
    },
    {
        path: "/detail/:id",//动态路由参数就是id
        props: true,//动态参数解耦合
        component: () => import(/*webpackChunkName:'detail' */"../pages/Detail")
    },
    {
        path: "/count",
        component: () => import(/*webpackChunkName:'count' */"../pages/Count")
    }, 
    {
        path:"/cart",
        component:()=>import(/*webpackChunkName:'cart' */"../pages/Cart")
    }
]

export default new VueRouter({
    // mode:"history",更改路由模式
    routes
})